<!--
 * @Author: DUST
 * @Date: 2023-05-16 09:22:23
 * @LastEditors: DUST
 * @LastEditTime: 2023-11-27 14:25:39
 * @FilePath: \business-card-system\admin\src\components\adminHeader.vue
 * @Description: 
 * undefined
-->
<template>
  <div id="adminHeader">
    <div class="adminHeaderLeft">
      <img src="@/assets/logo2.png" class="logoIcon" alt="" />
      <div class="system">{{ projectConfig.projectName }}</div>
    </div>
    <div class="adminHeaderCenter">
      <!-- <div
        class="headerMenuItem"
        v-for="(item, i) of props.routeList"
        :key="item?.meta?.key"
        :class="{
          activeMenu:
            $router.currentRoute.value.matched[1]?.meta?.key == item?.meta?.key,
        }"
        @click="goPath(item)"
      >
        {{ item?.meta?.title }}
      </div> -->
    </div>
    <div class="adminHeaderRight">
      <a-dropdown>
        <user-outlined class="user" />
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a @click="showEditPwd">修改密码</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <logout-outlined class="logoutIcon" @click="logout" />
    </div>
    <!-- 修改密码 -->
    <editPwd 
      v-if="visible"
      v-model:visible="visible"
      :loading="loading"
      @ok="confirmEdit"
    />
  </div>
</template>

<script setup lang="ts">
import { LogoutOutlined, UserOutlined } from "@ant-design/icons-vue";
import projectConfig from "@/config";
import { RouteMenuInterface } from "../interface";
import router from "@/router";
import emitter from "@/eventBus";
import editPwd from "./editPwd.vue";
import { ref } from "vue";
import { changePassowrd } from "@/api";
import user from "@/store/user";
import { message } from "ant-design-vue";

const visible = ref(false);
const loading = ref(false);
const showEditPwd = () => {
  visible.value = true;
}

const confirmEdit = (obj: any) => {
  console.log("obj", obj);
  loading.value = true;
  changePassowrd({ ...obj, id: user.userinfo?.id }).then(() => {
    message.success("密码修改成功");
    visible.value = false;
    logout();
  }).finally(() => {
    loading.value = false;
  })
}

const props = defineProps({
  routeList: {
    type: Array<RouteMenuInterface>,
    default: () => [],
  },
});

const goPath = (route: RouteMenuInterface) => {
  if (route.path !== router.currentRoute.value.path) router.push(route.path);
  emitter.emit("changeNav", route.meta.key);
};

/**
 * @description: 登出
 */
const logout = () => {
  router.push("/login");
};
</script>

<style lang="less" scoped>
#adminHeader {
  height: 70px;
  width: 100%;
  // background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  .user {
    margin-right: 10px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
  }

  .logoutIcon {
    font-size: 30px;
    color: #fff;
    cursor: pointer;
  }
  .adminHeaderLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
    .logoIcon {
      width: 42.8px;
      height: 38.6px;
    }
    .system {
      font-size: 24px;
      color: #fff;
      margin-left: 20px;
    }
  }
  .adminHeaderCenter {
    min-width: 1280px;
    display: flex;
    flex-direction: row;
    // text-align: center;
    justify-content: center;
    .headerMenuItem {
      // widt
      padding: 0 15px;
      box-sizing: border-box;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
    }
    .activeMenu {
      color: var(--ant-primary-color);
    }
  }
  // .adminHeaderRight {

  // }
}
</style>
